<script setup>
import * as echarts from 'echarts';
const chartRef = ref();
let chart;
let resizeObserver;
const loading = ref(true);
const dateList = ref(['6:00', '8:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00', '24:00']);
onMounted(async () => {
  chart = echarts.init(chartRef.value);
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985'
        }
      }
    },
    legend: {
      data: ['下载量', '注册量']
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: dateList.value
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        color: '#8e9dff',
        name: '下载量',
        type: 'line',
        smooth: true,
        stack: 'Total',
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0.25,
                color: '#8e9dff'
              },
              {
                offset: 1,
                color: '#fff'
              }
            ]
          }
        },
        emphasis: {
          focus: 'series'
        },
        data: [6000, 5000, 4000, 3000, 4200, 5500, 7000, 8000, 9000, 6500]
      },
      {
        color: '#26deca',
        name: '注册量',
        type: 'line',
        smooth: true,
        stack: 'Total',
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0.25,
                color: '#26deca'
              },
              {
                offset: 1,
                color: '#fff'
              }
            ]
          }
        },
        emphasis: {
          focus: 'series'
        },
        data: [5000, 6000, 7000, 4000, 5200, 5500, 7000, 8000, 9000, 6500]
      }
    ]
  };
  chart.setOption(option);
  //  自动监听容器大小变化，触发图表 resize
  resizeObserver = new ResizeObserver(() => {
    chart.resize();
  });
  resizeObserver.observe(chartRef.value);
});

onBeforeUnmount(() => {
  chart?.dispose();
  resizeObserver?.disconnect();
});
</script>

<template>
  <ElCard class="rd-8px shadow-sm">
    <div ref="chartRef" style="width: 100%; height: 350px" />
  </ElCard>
</template>
<style lang="scss" scoped></style>
